<template>
  <div>
    <NavBar :title="title" />
    <div class="content-top">
      <van-cell-group>
        <!-- 性质 -->
        <van-cell title="工作性质" :value="postData.job_Type != '' ? postData.job_Type : '请选择'" is-link size="large" @click="showPicker_jobtype = true" />
        <van-popup v-model="showPicker_jobtype" round position="bottom">
          <van-picker title="工作性质" show-toolbar :columns="picker_jobtype_data" :default-index="picker_jobtype_defaultIndex" value-key="codeValue" @confirm="onPickerJobTypeSubmit" @cancel="showPicker_jobtype = false" />
        </van-popup>
        <!-- 行业 -->
        <van-cell title="期望行业" :value="valueData.tradesValueStr" is-link size="large" @click="showPicker_hy = true" />
        <van-popup v-model="showPicker_hy" round position="bottom">
          <div class="subscribe-area-picker">
            <p>
              <button type="button" @click="showPicker_hy = false">取消</button>
              <span>选择期望行业（多选）</span>
              <button type="button" @click="onHYSubmit">确认</button>
            </p>
            <ul>
              <li :class="{ 'selected': selected_hy && selected_hy.indexOf(item.code) >= 0 }" v-for="(item, index) in select_hy_data" :key="index" @click="onHYSelect(item)">{{item.codeValue}}</li>
            </ul>
          </div>
        </van-popup>
        <!-- 职位 -->
        <div class="subscribe-job">
          <p>
            <label>意向岗位</label>
            <span @click="onZNEdit">{{ selected_zn.length > 0 ? '修改' : '添加' }}</span>
          </p>
          <ul>
            <li v-for="(item, index) in selected_znName" :key="index">{{ item }}</li>
          </ul>
        </div>
        <van-cell title="期望地区" :value="valueData.areasValueStr" is-link size="large" @click="showPicker_area = true" />
        <!-- 地区 -->
        <van-popup v-model="showPicker_area" round position="bottom">
          <div class="subscribe-area-picker">
            <p>
              <button type="button" @click="showPicker_area = false">
                取消
              </button>
              <span>选择期望地区（多选）</span>
              <button type="button" @click="onAreaSubmit">确认</button>
            </p>
            <ul>
              <li :class="{ selected: selected_area.indexOf(item.code) >= 0 }" v-for="(item, index) in select_area" :key="index" @click="onAreaSelect(item)">
                {{ item.codeValue }}
              </li>
            </ul>
          </div>
        </van-popup>
        <!-- 薪资 -->
        <van-cell title="期望薪资" :value="valueData.salaryValue" @click="showPicker_monthpay = true" is-link size="large" />
        <van-popup v-model="showPicker_monthpay" :lazy-render="false" round position="bottom">
          <van-picker title="期望薪资" show-toolbar :columns="select_monthpay" :default-index="picker_monthpay_defaultIndex" @confirm="onPickMonthPayConfirm" @cancel="showPicker_monthpay = false" value-key="codeValue" />
        </van-popup>
      </van-cell-group>
      <div style="padding: 20px 16px 0">
        <van-button round block type="primary" color="#05A6F0" style="font-size: 18px" :loading="loading_submit" @click="onsubmit" :disabled="disabled_submit" text="保存">
        </van-button>
      </div>
    </div>
    <!-- 选择期望职位 start -->
    <van-popup v-model="showPicker_zn" position="bottom" style="height: 100%">
      <div class="jobs-picker">
        <!-- 标题头 -->
        <div class="top">
          <p>
            <button type="button" @click="showPicker_zn = false">
              取消
            </button>
            <span>选择期望职位（最多3个）</span>
            <button type="button" @click="onZNSubmit">确认</button>
          </p>
          <!-- 搜索框 -->
          <van-search v-model="kw_zn" clear-trigger="always" @search="onZNSearch" @cancel="onZNSearchClear" shape="round" placeholder="请输入搜索关键词" style="border-bottom: 0.5px solid #e8e8e8" />
        </div>
        <!-- 搜索结果 -->
        <ul class="result" v-if="selected_zn_search.length > 0">
          <li v-for="(item, index) in selected_zn_search" :key="index" @click="onZNTwoClick(item)">
            <p v-html="item.codeValue.replace(kw_zn, '<span style=color:red>' + kw_zn + '</span>')"></p>
            <p>{{ item.title }}</p>
          </li>
        </ul>
        <!-- 选项 -->
        <div class="branch" v-if="selected_zn_search.length === 0">
          <ul class="first">
            <li v-for="(item, index) in select_zn_one" :key="index" @click="onZNOneClick(item)">{{ item.codeValue }}</li>
          </ul>
          <div class="shade" v-if="select_zn_one_id != ''" @click="select_zn_one_id = ''"></div>
          <div class="popu" v-if="select_zn_one_id != ''">
            <!-- 二级 -->
            <ul class="second">
              <li :class="{ select: selected_zn.indexOf(item.code) != -1 }" v-for="(item, index) in select_zn_two" :key="index" @click="onZNTwoClick(item)">
                {{ item.codeValue }}
              </li>
            </ul>
          </div>
        </div>
        <!-- 已选 -->
        <div class="selected" v-if="selected_znName_sel.length > 0">
          <label>已选：</label>
          <ul>
            <li v-for="(item, index) in selected_znName_sel" :key="index" @click="onZNSelRemove(index)">
              {{ item }}
            </li>
          </ul>
        </div>
      </div>
    </van-popup>
    <!-- 选择期望职位 end -->
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
import { Cell, CellGroup, Field, Picker, Popup, Toast, Button, Search } from "vant";
import { mixin_person_resumeSumbitBack } from '@/mixin/mixins'
import Global from '@/Global';
export default {
  name: 'ResumeJobWanted',
  components: {
    NavBar,
    [Cell.name]: Cell,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [Search.name]: Search,
  },
  props: ['title', 'data'],
  mixins: [mixin_person_resumeSumbitBack],
  // 定义属性
  data() {
    return {
      postData: {
        job_Type: '',
        trade_ID: '',
        position_ID: '',
        work_Addr: '',
        salary_Wanted: ''
      },
      //显示属性
      valueData: {
        tradesValueStr: '',
        areasValueStr: '',
        salaryValue: ''
      },
      showPicker_jobtype: false,
      picker_jobtype_data: this.$bd.jobType,
      picker_jobtype_defaultIndex: 0,

      showPicker_hy: false,
      select_hy_data: this.$bd.trade,
      selected_hy: [],

      showPicker_zn: false,
      kw_zn: '',

      select_zn_one: this.$bd.positionGrade1,
      select_zn_one_id: "",
			bd_zn_one: this.$bd.positionGrade1,//所有一级分类职能数据
      bd_zn_two: this.$bd.positionGrade2,//所有二级分类职能数据
      select_zn_two:[] ,
      select_zn_two_id: '',
      select_zn_three: [],
      selected_zn_search: [],
      selected_zn: [],
      selected_znName: [],//选择的 点确定后 显示的
      selected_znName_sel: [],//选择的
      showPicker_area: false,
      select_area: this.$bd.area,
      selected_area: [],
      showPicker_monthpay: false,
      select_monthpay: this.$bd.monthpay,
      picker_monthpay_defaultIndex: 0,
      loading_submit: false,
    }
  },
	created(){
		this.$api.get('/Resume/GetJobWanted').then(res=>{
			if(res.success){
				let data = res.response;
				//postdata 
				this.postData.job_Type = data.job_Type;
				this.postData.trade_ID = data.trade_ID;
				this.postData.position_ID = data.position_ID;
				this.postData.work_Addr = data.work_Addr;
				this.postData.salary_Wanted = data.salary_Wanted;
				//valuedata
				this.valueData.tradesValueStr = data.tradesValueStr;//行业文本
				this.valueData.areasValueStr = data.areasValueStr;//地区文本
				this.valueData.salaryValue = data.salaryValue;//薪资文本
				this.selected_hy = data.tradesIDArr; //选中的行业ID数组
				this.selected_zn = data.positionsIDArr;//选中的职能ID数组
				this.selected_znName = data.positionsValueArr;//选中的职能文本数组
				this.selected_znName_sel = data.positionsValueArr;//选中的职能文本数组
				this.selected_area = data.areasIDArr;//选中的地区ID数组
				this.selected_areaName = data.areasValueValue;//选中的地区文本数组
			}
		})
	},
  computed: {
    disabled_submit() {
      if (this.postData.job_Type != '' && this.postData.trade_ID != ''&& this.postData.position_ID != '' && this.postData.work_Addr != '' && this.postData.salary_Wanted != '') {
        return false;
      }
      return true;
    }
  },
  // 方法集合
  methods: {
		//类型确认
    onPickerJobTypeSubmit(value) {
      this.showPicker_jobtype = false;
      this.postData.job_Type = value;
    },
		//行业选择
    onHYSelect(item) {
      let arr = this.selected_hy == null ? []: this.selected_hy;
      let index = arr.indexOf(item.code);
      if (index >= 0) {
        //取消
        arr.splice(index, 1);
      } else {
        //添加
        if (arr.length >= 3) {
          Toast('最多选择3个');
          return;
        }
        arr.push(item.code);
      }
			this.selected_hy = arr;
    },
		//行业确认
    onHYSubmit() {
      if (this.selected_hy.length === 0) {
        Toast('请选择期望行业');
        return;
      }
      this.showPicker_hy = false;
      this.postData.trade_ID = this.selected_hy.join();
			//文本
			let strArr = [];
			for (let i = 0; i < this.postData.trade_ID.split(',').length; i++) {
        let id = this.postData.trade_ID.split(',')[i];
        let item = this.select_hy_data.filter(data => {
          return data.code === id
        })[0];
        strArr.push(item.codeValue)
      }
			this.valueData.tradesValueStr = strArr.join();
    },
    //职能编辑
    onZNEdit() {
      this.showPicker_zn = true;
    },
    //职能大类选择
    onZNOneClick(item) {
      this.select_zn_one_id = item.code;
      this.select_zn_two = this.bd_zn_two.filter((item_two) => {
        return item_two.code.substr(0, 2) === item.code.substr(0,2);
      });
    },
    //职能中类选择
    onZNTwoClick(item) {
      this.select_zn_tow_id = item.code;
      if (this.selected_zn.length === 3) {
        Toast("最多选择3个意向岗位");
        return;
      }
      if (this.selected_zn.indexOf(item.code) >= 0) {
        Toast("该意向岗位已经选择");
        return;
      }
      this.selected_zn.push(item.code);
      this.selected_znName_sel.push(item.codeValue);
    },
    //删除已选职能
    onZNSelRemove(index) {
      this.selected_znName_sel.splice(index, 1);
      this.selected_zn.splice(index, 1);
    },
    //搜索职能
    onZNSearch(val) {
      this.selected_zn_search = [];
      if (val === "") {
        Toast("请输入关键字");
        return;
      }
      if (val === "所有" || val === "其他") {
        Toast("搜索不到该岗位");
        return;
      }
      //从二级类别中搜索
      let array_result = this.bd_zn_two.filter((item) => {
        return item.codeValue.indexOf(val) >= 0;
      });
      //遍历搜索结果找出该类分类
      if (array_result.length > 0) {
        array_result.forEach((item) => {
          let item_tow = this.bd_zn_two.filter((i) => {
            return i.code === item.code.substr(0, 4);
          })[0];
          let item_one = this.bd_zn_one.filter((i) => {
            return i.code.substr(0, 2) === item.code.substr(0, 2);
          })[0];
          item.title = `${item_one.codeValue}-${item_tow.codeValue}`;
        });
        this.selected_zn_search = array_result;
      } else {
        Toast("搜索不到该岗位");
        return;
      }
    },
    onZNSearchClear() {
      this.selected_zn_search = [];
    },
		//职能确认
    onZNSubmit() {
      if (this.selected_zn.length === 0) {
        Toast('请选择意向岗位');
        return;
      }
      this.showPicker_zn = false;
      let nameStr = JSON.stringify(this.selected_znName_sel);
      this.selected_znName = JSON.parse(nameStr);
      this.postData.position_ID = this.selected_zn.join();
    },
    //选择地区
    onAreaSelect(item) {
      let index = this.selected_area.indexOf(item.code);
      if (index >= 0) {
        this.selected_area.splice(index, 1);
      } else {
        if (this.selected_area.length === 3) {
          Toast('最多选3个');
          return;
        }
        this.selected_area.push(item.code)
      }
    },
    //选择地区-确定
    onAreaSubmit() {
      if (this.selected_area.length === 0) {
        Toast('请选择');
        return;
      }
			this.showPicker_area = false;
      this.postData.work_Addr = this.selected_area.join();
			//文本
			let strArr = [];
			for (let i = 0; i < this.postData.work_Addr.split(',').length; i++) {
        let id = this.postData.work_Addr.split(',')[i];
        let item = this.select_area.filter(data => {
          return data.code === id
        })[0];
        strArr.push(item.codeValue)
      }
			this.valueData.areasValueStr = strArr.join();
      
    },
    //选择薪资
    onPickMonthPayConfirm(item) {
      this.showPicker_monthpay = false;
      this.postData.salary_Wanted = item.code;
			this.valueData.salaryValue = item.codeValue;
    },
    //提交保存
    onsubmit() {
			this.loading_submit = true;
			this.$api.post('/Resume/SaveJobWanted',this.postData).then(res=>{
				this.loading_submit = false;
				if(res.success){
					Toast.success('保存成功');
					this.$bus.$emit(Global.bus_person_resume_update);
					this.$bus.$emit(Global.bus_person_resume_jwupdate);
					this.goBack();
				}
				else{Toast.fail(res.msg)}
			})
    }
  },
}
</script>

<style>
.subscribe-job {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 12px 15px;
  background-color: #fff;
}

.subscribe-job::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 0;
  height: 0.5px;
  background-color: #ebedf0;
}

.subscribe-job p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 22px;
  line-height: 22px;
}

.subscribe-job p label {
  font-size: 16px;
  color: #323233;
}

.subscribe-job p label::after {
  content: "（最多选3个）";
  font-size: 13px;
  color: #888;
}

.subscribe-job p span {
  padding: 0 10px;
  border-radius: 12px;
  background-color: #ff7700;
  font-size: 13px;
  color: #fff;
}

.subscribe-job ul {
  display: flex;
  flex-wrap: wrap;
  margin-top: 12px;
}

.subscribe-job ul li {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 8px;
  border: 1px solid #ff7700;
  border-radius: 30px;
  margin: 4px 6px 4px 0;
  font-size: 13px;
  color: #05A6F0;
}

.subscribe-area-picker {
  position: relative;
  background-color: #fff;
  -webkit-user-select: none;
  user-select: none;
}

.subscribe-area-picker p {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  height: 44px;
  background-color: #fff;
}

.subscribe-area-picker p span {
  max-width: 50%;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
}

.subscribe-area-picker p button {
  height: 100%;
  padding: 0 16px;
  font-size: 14px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.subscribe-area-picker p button:nth-child(1) {
  color: #969799;
}

.subscribe-area-picker p button:nth-child(3) {
  color: #576b95;
}

.subscribe-area-picker ul {
  display: flex;
  flex-wrap: wrap;
  padding: 15px;
}

.subscribe-area-picker ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(33.33% - 14px);
  height: 34px;
  border: 1px solid #f9f9f9;
  border-radius: 32px;
  margin: 6px;
  background-color: #f9f9f9;
  font-size: 15px;
  color: #333;
}

.subscribe-area-picker ul li.selected {
  border-color: rgba(255, 119, 0, 0.1);
  background-color: rgba(255, 119, 0, 0.08);
  color: #05A6F0;
  font-weight: 500;
}

.jobs-picker {
  position: relative;
  background-color: #fff;
  -webkit-user-select: none;
  user-select: none;
}

.jobs-picker .top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.jobs-picker .top p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  border-bottom: 0.5px solid #e8e8e8;
}

.jobs-picker .top p span {
  max-width: 50%;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
}

.jobs-picker .top p button {
  height: 100%;
  padding: 0 16px;
  font-size: 14px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.jobs-picker .top p button:nth-child(1) {
  color: #969799;
}

.jobs-picker .top p button:nth-child(3) {
  color: #576b95;
}

.jobs-picker .selected {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 888;
  display: flex;
  height: 32px;
  padding: 10px 15px;
  border-top: 0.5px solid #e8e8e8;
  background-color: #fff;
}

.jobs-picker .selected label {
  display: flex;
  align-items: center;
  flex: 0 0 42px;
  height: 32px;
  font-size: 14px;
  color: #333;
}

.jobs-picker .selected ul {
  display: flex;
  align-items: center;
  flex: 1;
  height: 32px;
  margin: 0;
  overflow: hidden;
}

.jobs-picker .selected ul li {
  position: relative;
  max-width: 32%;
  height: 30px;
  padding: 0 15px 0 8px;
  border: 1px solid rgba(255, 119, 0, 0.25);
  border-radius: 30px;
  background-color: rgba(255, 119, 0, 0.05);
  font-size: 13px;
  color: #05A6F0;
  line-height: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  box-sizing: border-box;
}

.jobs-picker .selected ul li + li {
  margin-left: 2%;
}

.jobs-picker .selected ul li::before,
.jobs-picker .selected ul li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 11px;
  width: 1px;
  height: 10px;
  background-color: #05A6F0;
}

.jobs-picker .selected ul li::before {
  transform: translateY(-50%) rotate(-45deg);
}

.jobs-picker .selected ul li::after {
  transform: translateY(-50%) rotate(45deg);
}

.jobs-picker .result {
  padding-left: 15px;
  margin: 99px 0 52.5px;
}

.jobs-picker .result li {
  display: flex;
  flex-direction: column;
  padding: 10px 16px 10px 0;
  border-bottom: 0.5px solid #e8e8e8;
}

.jobs-picker .result li p:nth-child(1) {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.jobs-picker .result li p:nth-child(2) {
  margin-top: 2px;
  font-size: 12px;
  color: #aaa;
}

.jobs-picker .result li p span {
  color: #05A6F0;
}

.jobs-picker .branch {
  margin: 99px 0 52.5px;
}

.jobs-picker .first {
  display: flex;
  flex-direction: column;
  padding-left: 15px;
}

.jobs-picker .first li {
  display: flex;
  align-items: center;
  height: 46px;
  border-bottom: 0.5px solid #e8e8e8;
  font-size: 16px;
  color: #333;
}

.jobs-picker .shade {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.5);
}

.jobs-picker .popu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 333;
  display: flex;
  width: 90%;
  padding: 99px 0 52.5px;
  background-color: #fff;
  animation-name: bounceIn;
  animation-fill-mode: both;
  animation-duration: 0.3s;
  overflow-y: auto;
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: translateX(44%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.jobs-picker .second {
  display: flex;
  flex-direction: column;
  width: 50%;
  overflow-y: scroll;
}

.jobs-picker .second li {
  position: relative;
  display: block;
  padding: 12px 16px;
  font-size: 15px;
  color: #666;
  line-height: 21px;
}

.jobs-picker .second li.select {
  color: #ff7700;
}

.jobs-picker .second li.select::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 20px;
  background-color: #ff7700;
  transform: translateY(-50%);
}

.jobs-picker .three {
  display: flex;
  flex-direction: column;
  width: 50%;
  background-color: #f7f7f7;
  overflow-y: scroll;
}

.jobs-picker .three li {
  position: relative;
  display: block;
  padding: 12px 16px;
  font-size: 15px;
  color: #666;
  line-height: 21px;
}

.jobs-picker .three li.select {
  color: #05A6F0;
}
</style>